import { VC, Component } from '@/VC-vue'
import './search.styl'
import { getTaskDetail } from '@/services/control'
import { Toast } from 'mand-mobile'
import noDataImg from './../../assets/img/no-data.png'

@Component({})
export default class Search extends VC {
    $refs!: {
        scrollView: any
    }
    pager: any = {
        startPage: 1,
        pageSize: 5
    }
    taskInfo: any = {}
    isFinished: boolean = false
    total: number = 0
    noData: boolean = false
    _getData() {
        const params = {
            taskId: Number(this.$router.currentRoute.query.taskId),
            ...this.pager
        }
        return new Promise((resolve, reject) => {
            getTaskDetail(params)
                .then((res: any) => {
                    this.taskInfo = res.data.retData
                    this.$refs.scrollView.reflowScroller()
                    this.total = res.data.totalNum
                    if (
                        !res.data.retData.qcTaskResults ||
                        res.data.retData.qcTaskResults.length < 1
                    ) {
                        this.noData = true
                        this.isFinished = true
                    }
                    Toast.hide()
                    resolve(true)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
    mounted() {
        Toast.loading('加载中...')
        this._getData()
    }
    renderItem(res?: any, needMargin?: boolean) {
        return (
            <div class="list-item" style={needMargin && 'margin-bottom:0'}>
                <div class="top">质控记录表</div>
                <div class="item-title">规则名称：{res.ruleName}</div>
                <div class="item-main">
                    <md-detail-item
                        title="患者姓名"
                        content={res.patientName}
                        bold
                    />
                    <md-detail-item
                        title="规则大类"
                        content={res.ruleKindName}
                        bold
                    />
                    <md-detail-item title="病案号" content={res.bah} bold />
                    <md-detail-item
                        title="质控动作"
                        content={res.actionType == 1 ? '质控' : '提醒'}
                        bold
                    />
                    <md-detail-item
                        title="住院号"
                        content={res.patientNo}
                        bold
                    />
                    <md-detail-item
                        class="diy_item"
                        title="质控结果说明"
                        content={res.qcRemark}
                        bold
                    />
                </div>
            </div>
        )
    }
    async $_onEndReached() {
        if (this.isFinished) {
            return
        }
        // async data
        if (this.pager.pageSize >= this.total) {
            this.isFinished = true
            this.$refs.scrollView.finishLoadMore()
        } else {
            this.pager.pageSize += 5
            const result = await this._getData()
            if (result) {
                this.$refs.scrollView.finishLoadMore()
            }
        }
    }
    renderTitle() {
        return (
            <div class="item-card">
                <div class="header-slot is-flex" slot="header">
                    <p class="desc">质控对象：{this.taskInfo.targetName}</p>

                    <div
                        class={
                            this.taskInfo.taskStatus == 'F'
                                ? 'header_tag success'
                                : 'header_tag'
                        }
                    >
                        {this.taskInfo.taskStatus == 'U' && '未处理'}
                        {this.taskInfo.taskStatus == 'P' && '处理中'}
                        {this.taskInfo.taskStatus == 'F' && '处理完成'}
                        {this.taskInfo.taskStatus == 'E' && '处理异常'}
                    </div>
                </div>
                <md-detail-item
                    title="规则大类名称"
                    content={this.taskInfo.ruleKindName}
                    bold
                />
                <md-detail-item
                    title="质控项目"
                    content={this.taskInfo.ruleNames}
                />
                <md-detail-item
                    title="质控对象"
                    content={this.taskInfo.targetName}
                />
                <md-detail-item
                    title="质控对象数量"
                    content={this.taskInfo.targetCount}
                />
                <md-detail-item
                    title="异常对象数量"
                    content={this.taskInfo.outlierCount}
                />
                <md-detail-item title="质控记录数量" content={this.total} />
                <md-detail-item
                    title="处理说明"
                    content={this.taskInfo.remark}
                />
            </div>
        )
    }
    renderDetail() {
        return (
            <md-scroll-view
                class="detail-container"
                ref="scrollView"
                scrolling-x={false}
                onendReached={this.$_onEndReached}
            >
                {this.renderTitle()}

                {this.noData ? (
                    <div class="no-data">
                        <img src={noDataImg} />
                        <p>暂无质控记录</p>
                    </div>
                ) : (
                    <div class="detail-list">
                        {this.taskInfo.qcTaskResults &&
                            this.taskInfo.qcTaskResults.map(
                                (res: any, index: any) => {
                                    if (
                                        index >=
                                        this.taskInfo.qcTaskResults.length - 1
                                    ) {
                                        return this.renderItem(res, true)
                                    } else {
                                        return this.renderItem(res)
                                    }
                                }
                            )}
                        <md-scroll-view-more
                            slot="more"
                            is-finished={this.isFinished}
                        />
                    </div>
                )}
            </md-scroll-view>
        )
    }

    render() {
        return <div class="detail_main">{this.renderDetail()}</div>
    }
}
